﻿<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>H5图片上传显示</title>
<script src="../js/jquery.min.js"></script>
<style>
.file {
	position:relative;
	display:inline-block;
	background:#D0EEFF;
	border:1px solid #99D3F5;
	border-radius:4px;
	padding:4px 12px;
	overflow:hidden;
	color:#1E88C7;
	text-decoration:none;
	text-indent:0;
	line-height:20px;
}
.file input {
	position:absolute;
	font-size:100px;
	right:0;
	top:0;
	opacity:0;
}
.file:hover {
	background:#AADFFD;
	border-color:#78C3F3;
	color:#004974;
	text-decoration:none;
}
.my-car-thumbnail img {
	width:100%
}
</style>
</head>
<body>
<div class="view-container" style="overflow:auto">
    <div class="view-container top-tab">
        <div class="scroll-content dwz-scroll">
            <div class="scroll">
                
                <div class="">
                    <form method="post" action="">
                        <div class="list">
                            <div class="item">
                                <div class="item-content">
                                    &nbsp;&nbsp;&nbsp;&nbsp;
                                    <a href="javascript:;" class="file">拍照上传
											<input type="file" id="upload" accept="image/*" capture="camera">
											</a>
                                </div>
                            </div>
                        </div>
                        <div class="item-inquiry">
                            <label style="color: #999999;">参考样例</label>
                            <div class="my-car-thumbnail"><img id="pictures" class="img_wrap" src="http://www.jq22.com/img/cs/500x500-1.png"></div>
                        </div>
                    </form>
                </div>
                
            </div>
        </div>
    </div>
</div>

<script>
 var demo_h5_upload_ops = {
     init: function() {
         this.eventBind();
     },
     eventBind: function() {
         var that = this;
         $("#upload").change(function() {
             var reader = new FileReader();
             reader.onload = function(e) {
                 that.compress(this.result);
             };
             reader.readAsDataURL(this.files[0]);
         });
     },
     compress: function(res) {
         var that = this;
         var img = new Image(),
             maxH = 300;

         img.onload = function() {
             var cvs = document.createElement('canvas'),
                 ctx = cvs.getContext('2d');

             if (img.height > maxH) {
                 img.width *= maxH / img.height;
                 img.height = maxH;
             }
             cvs.width = img.width;
             cvs.height = img.height;

             ctx.clearRect(0, 0, cvs.width, cvs.height);
             ctx.drawImage(img, 0, 0, img.width, img.height);
             var dataUrl = cvs.toDataURL('image/jpeg', 1);
             $(".img_wrap").attr("src", dataUrl);
             $(".img_wrap").show();
             // 上传略
             that.upload(dataUrl);
         };

         img.src = res;
     },
     upload: function(image_data) {
         /*这里写上次方法,图片流是base64_encode的*/
     }
 };


 $(document).ready(function() {
     demo_h5_upload_ops.init();
 });
</script>

</body>
</html>
